<template>
  <div :style="{ background: `url(${bg}) top center no-repeat` }" class="box">
    <div class="box-left">
      <div class="box-left-card">
        <section>
          <div>较上日+{{ store.chinaAdd.localConfirmH5 }}</div>
          <div>{{ store.chinaTotal.localConfirm }}</div>
          <div>本土现有确诊</div>
        </section>
        <section>
          <div>较上日+{{ store.chinaAdd.nowConfirm }}</div>
          <div>{{ store.chinaTotal.nowConfirm }}</div>
          <div>现有确诊</div>
        </section>
        <section>
          <div>较上日+{{ store.chinaAdd.confirm }}</div>
          <div>{{ store.chinaTotal.confirm }}</div>
          <div>累计确诊</div>
        </section>
        <section>
          <div>较上日+{{ store.chinaAdd.noInfect }}</div>
          <div>{{ store.chinaTotal.noInfect }}</div>
          <div>无症状感染者</div>
        </section>
        <section>
          <div>较上日+{{ store.chinaAdd.importedCase }}</div>
          <div>{{ store.chinaTotal.importedCase }}</div>
          <div>境外输入</div>
        </section>
        <section>
          <div>较上日+{{ store.chinaAdd.dead }}</div>
          <div>{{ store.chinaTotal.dead }}</div>
          <div>累计死亡</div>
        </section>
      </div>
      <div class="box-left-pie"></div>
      <div class="box-left-line"></div>
    </div>
    <div class="box-center" id="chinaMap" style="height:100%;width:100%;">
    </div>
    <div class="box-right" style="color: white;">
      <table border="1" cellspacing="0" class="table">
        <thead>
          <tr>
            <th>地区</th>
            <th>新增确诊</th>
            <th>累计确诊</th>
            <th>治愈</th>
            <th>死亡</th>
          </tr>
        </thead>
        <transition-group tag="tbody" enter-active-class="animate__animated animate__fadeInDown">
          <tr v-for="(item, index) in store.item" :key="item.name + index">
            <td align="center">{{ item.name }}</td>
            <td align="center">{{ item.today.confirm }}</td>
            <td align="center">{{ item.total.confirm }}</td>
            <td align="center">{{ item.total.heal }}</td>
            <td align="center">{{ item.total.dead }}</td>
          </tr>
        </transition-group>
      </table>
    </div>
  </div>
</template>

<script setup lang='ts'>
import bg from './assets/1.webp'
import bg2 from './assets/2.webp'
import { useStore } from './stores/index'
import { onMounted } from 'vue'
//echarts4可以直接 import echarts from 'echarts' 
//echarts5可以直接 import * as echarts from 'echarts' 
import * as echarts from 'echarts'
import './assets/china.js'
import { geoCoordMap } from './assets/gapMap'
import 'animate.css'

const store = useStore()

onMounted(async () => {
  await store.getList()
  initCharts()
  initPie()
  initLine()
})

const initCharts = () => {
  const city = store.list.diseaseh5Shelf.areaTree[0].children
  // console.log(city);
  store.item = city.filter(item => {
    return item.children
  })
  const data = city.map(item => {
    // console.log(item.name,geoCoordMap[item.name].concat(item.total.nowConfirm));
    return {
      name: item.name,
      value: geoCoordMap[item.name].concat(item.total.nowConfirm),
      children: item.children
    }
  })
  const charts = echarts.init(document.querySelector('#chinaMap') as HTMLElement)
  let option = {
    geo: {
      map: "china",
      aspectScale: 0.8,
      layoutCenter: ["50%", "50%"],
      layoutSize: "90%",
      itemStyle: {
        //  normal: {
        areaColor: {
          type: "linear-gradient",
          x: 0,
          y: 1200,
          x2: 1000,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#152E6E", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#0673AD", // 50% 处的颜色
            },
          ],
          global: true, // 缺省为 false
        },
        shadowColor: "#0f5d9d",
        shadowOffsetX: 0,
        shadowOffsetY: 15,
        opacity: 0.5,
        // },

      },
      emphasis: {
        areaColor: "#0f5d9d",
      },

      regions: [
        {
          name: "南海诸岛",
          itemStyle: {
            areaColor: "rgba(0, 10, 52, 1)",
            borderColor: "rgba(0, 10, 52, 1)",
            //normal: {
            opacity: 0,
            label: {
              show: false,
              color: "#009cc9",
            },
            //},
          },
          label: {
            show: false,
            color: "#FFFFFF",
            fontSize: 12,
          },
        },
      ],
    },
    series: [
      {
        type: "map",
        map: "china",
        aspectScale: 0.8,
        layoutCenter: ["50%", "50%"], //地图位置
        layoutSize: "90%",
        label: {
          show: true,
          color: "#FFFFFF",
          fontSize: 12,
        },
        itemStyle: {
          areaColor: "#0c3653",
          borderColor: "#1cccff",
          borderWidth: 1.8,
        },
        emphasis: {
          areaColor: "#56b1da",
          label: {
            show: true,
            color: "#fff",
          },
        },
        data: data,
      },
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'pin',
        symbolSize: [45, 45],
        label: {
          show: true,
          color: "#fff",
          formatter(value: any) {
            return value.data.value[2]
          }
        },
        itemStyle: {
          color: '#1E90FF', //标志颜色
        },
        data: data,
      },
    ]
  }
  charts.setOption(option)
  charts.on('click', (e: any) => {
    store.item = e.data?.children
  })
  // charts.getZr().on('click', function (param) {
  //   // 获取 点击的 触发点像素坐标
  //   const pointInPixel = [param.offsetX, param.offsetY]
  //   // 判断给定的点是否在指定的坐标系或者系列上
  //   if (charts.containPixel('geo', pointInPixel)) {
  //     // 获取到点击的 x轴 下标  转换为逻辑坐标
  //     const xIndex = charts.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0]
  //     const yIndex = charts.convertFromPixel({ seriesIndex: 1 }, pointInPixel)[1]
  //     console.log(xIndex);
  //     console.log(yIndex);
  //   }
  // })
}

const initPie = () => {
  const charts = echarts.init(document.querySelector('.box-left-pie') as HTMLElement)

  const data = store.cityDetail.map(item => {
    return {
      value:item.local_confirm_add,
      name:item.city
    }
  })

  let option = {
    backgroundColor:'#223651',
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        itemStyle: {
          borderRadius: 4,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '15'
          }
        },
        data: data
      }
    ]
  }

  charts.setOption(option)


}

const initLine = () => {
  const charts = echarts.init(document.querySelector('.box-left-line') as HTMLElement)
  
  const data = store.cityDetail.map(item => {
    return item.city
  })

  const data2 = store.cityDetail.map(item => {
    return item.mediumRiskAreaNum
  })

  let option = {
    backgroundColor:'#223651',
    xAxis: {
      type: 'category',
      data: data.slice(0,5),
      axisLine:{
        lineStyle:{
          color:'#fff'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine:{
        lineStyle:{
          color:'#fff'
        }
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    label:{
      show:true
    },
    series: [
      {
        data: data2.slice(0,5),
        type: 'line',
        smooth: true
      }
    ]
  }

  charts.setOption(option)
}

</script>

<style lang='scss'>
$itemColor: #41b0db;
$itemBg: #223651;
$itemBorder: #212028;

* {
  margin: 0;
  padding: 0;
}

html,
body,
#app {
  height: 100%;
  overflow: hidden;
}

.box {
  height: 100%;
  display: flex;

  &-left {
    width: 400px;
    padding: 20px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    // overflow: hidden;
    // background-color: red;
    &-card{
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: 100px 100px;
      justify-items: center;
      align-items: center;
      background-color: $itemBg;
      &>section {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: white;
        font-size: 12px;
        border-top: 1px solid $itemBorder;
        border-right: 1px solid $itemBorder;
        &>:nth-child(2){
          color: $itemColor;
          font-size: 14px;
          padding: 10px 0;
        }
      }
    }
    &-pie{
      height: 320px;
      margin-top: 20px;
    }
    &-line{
      height: 320px;
      margin-top: 20px;
    }
  }

  &-center {
    flex: 1;
    // #chinaMap{
    //   width: 100%;
    //   height: 100%;
    // }
  }

  &-right {
    width: 400px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }

    // background-color: blue;
    .table {
      width: 100%;
      background-color: #212028;

      tr {
        th {
          padding: 5px;
          white-space: nowrap;
        }

        td {
          padding: 5px 10px;
          width: 100px;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>  
